<template>
  <div class="login">
    <el-row>
        <el-col :lg="16" :md="12" class="col_left" >
            <h1>Vue3商城管理系统</h1>
            <span>技术支持</span>
        </el-col>
        <el-col :lg="8" :md="12" class="col_right">
            <h1>登录</h1>
            <el-form 
                class="login-form"
                ref="loginFormRef"
                :model="loginForm"
                :rules="loginRules"
            >
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="请输入用户名" :prefix-icon="Avatar"/>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" placeholder="请输入密码" :prefix-icon="Lock"/>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="loginClick" :loading="isLoading">登录</el-button>
        </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { loginFn, getUserInfoFn } from '@/api/login.js'
import {Avatar, Lock} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'

const router = useRouter()
const store = useStore()

const isLoading = ref(false)
// 获取form表单DOM元素
const loginFormRef = ref(null)

// 实现双向数据绑定（数据源）
const loginForm = reactive({
    username: '',
    password: ''
})

// 验证数据是否合法
const loginRules = reactive({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur'},
        { min: 3, max: 15, message: '请输入3-15个字符', trigger: 'blur'}
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur'},
        { min: 3, max: 15, message: '请输入3-15个字符', trigger: 'blur'}
    ]
})

// 登录
const loginClick = () => {
    // 判断校验规则是否通过
    loginFormRef.value.validate(async valid =>{
        try{
            if(!valid) return
            isLoading.value = true
            const res = await loginFn(loginForm)
            if(res.msg && res.msg !== 'ok'){
                ElMessage.error(res.msg)
                return
            }
            // 本地存储保存token信息
            window.sessionStorage.setItem('token', res.data.token)

            // // 获取管理员信息
            // const res2 = await getUserInfoFn()
            // if(res2.msg && res2.msg!== 'ok'){
            //     return 
            // }
            // store.commit('setUserInfo', res2.data)
            // 跳转到后台首页
            router.push('/home')
        }catch(err){
            console.log(err)
        }finally{
            isLoading.value = false
        }

    })
}

</script>

<style lang="less" scoped>
.login{
    height: 100vh;
    .el-row{
        height: 100%;
        background-color: #1AA094;
    }
    .col_left{
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .col_right{
    background-color: #fff;
    display: flex; 
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .login-form{
            width: 240px;
    }
    }
    .el-button{
        width: 240px;
        background: #1AA094;
    }
}
</style>